<template>
  <view class="root">
    <view class="header">
      <image class="left" :src="goodsDetail?goodsDetail.cover:''"></image>
      <view class="right">
        <view class="name">{{ selectModel.tName }}</view>
        <view class="desc">{{ selectModel.classifyName }} - {{ selectModel.goodsName }}</view>
        <view class="money">
          <text class="line">￥{{ selectModel.linePrice }}</text>
          <text class="light">￥{{ selectModel.price }}</text>
        </view>
      </view>

    </view>


    <view class="divider"></view>

    <view class="content">
      <scroll-view scroll-x class="nav tabs" scroll-with-animation :scroll-left="scrollLeft">
        <view class="cu-item tab" :class="{active:index===currentDateIndex}"
              v-for="(item,index) in timeList" :key="index" @click="handleDateSelect(index)">
          <view class="tab-wrapper">
            <view>{{ item.week }}</view>
            <view>{{ item.dateShow }}</view>
          </view>
        </view>
      </scroll-view>

      <view class="time-wrapper" :class="{disabled:selectDate && selectDate.status == 1}">

        <view class="time-block" v-if="selectDate && selectDate.time.up.length > 0">
          <view class="title">
            <text class="cuIcon-time"></text>
            <text>预约上午</text>
          </view>

          <view class="time-list">
            <view class="time" v-for="(time,i) in selectDate.time.up" :key="i" @click="handleTimeSelect(time)"
                  :class="{
                  current: selectDateTime === getDateTime(selectDate.date,time.time),
                  disable: time.status == 1
                }">
              {{ time.time }}
            </view>
          </view>
        </view>

        <view class="time-block" v-if="selectDate && selectDate.time.down.length > 0">
          <view class="title">
            <text class="cuIcon-time"></text>
            <text>预约下午</text>
          </view>

          <view class="time-list">
            <view class="time" v-for="(time,i) in selectDate.time.down" :key="i" @click="handleTimeSelect(time)"
                  :class="{
                  current: selectDateTime === getDateTime(selectDate.date,time.time),
                  disable: time.status == 1
                }">
              <view> {{ time.time }}</view>
              <view v-if="time.status == 1">不可约</view>
            </view>
          </view>
        </view>

        <view class="disable-dialog" v-if="selectDate && selectDate.status == 1">今日不可约</view>
      </view>


    </view>


    <view class="footer">

      <view class="btn" @click="handleConfirm">确定</view>

    </view>

    <my-dialog ref="dialog" @confirm="handlePost">
      <view slot="content" class="dialog">
        <view class="title">请输入预约信息</view>
        <input type="text" class="input" placeholder="请输入姓名" v-model="form.realname"/>
        <input type="number" maxlength="11" class="input" placeholder="请输入电话" v-model="form.phone"/>
      </view>
    </my-dialog>

    <my-dialog ref="dialog2" content="预约成功" @confirm="toOrder"></my-dialog>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import MyDialog from "@/components/dialog";

export default {
  name: "choose-time",
  components: {MyDialog},
  data() {
    return {
      scrollLeft: 0,
      currentDateIndex: 0,
      info: {
        timeStep: 30,
        forenoonStartTime: '10:00',
        forenoonEndTime: '12:00',
        afternoonStartTime: '13:00',
        afternoonEndTime: '21:00',
      },
      selectTime: null,
      selectModel: {},
      selectDateTime: null,

      timeList: {},

      orderId: null,

      goodsDetail: null,

      form: {
        realname: '',
        phone: '',
      },
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.selectModel = options;
    this.getGoodsInfo();
    this.getTimeList();
  },
  methods: {
    getGoodsInfo() {
      Api.gettGoodsDetail(this.selectModel.goodsId).then(res => {
        this.goodsDetail = res;
      })
    },
    handleDateSelect(index) {
      this.currentDateIndex = index;
      this.scrollLeft = (index - 1) * this.core.rpx2px(180)
      this.selectTime = null;
      this.selectDateTime = null;
    },
    handleTimeSelect(time) {
      if (time.status == 1) return;
      this.selectTime = time;

      this.selectDateTime = this.getDateTime(this.selectDate.date, this.selectTime.time)
    },
    getDateTime(date, time) {
      return `${date} ${time}:00`
    },
    getTimeList() {
      Api.getTimeList(this.selectModel.tId, this.selectModel.goodsId).then(res => {
        this.timeList = res
      })
    },
    handlePost() {
      let data = {
        staff_id: this.selectModel.tId,
        goods_id: this.selectModel.goodsId,
        appointment_time: this.selectDateTime,
        ...this.form
      }
      Api.appointment(data).then(res => {
        this.selectTime.status = 1
        this.selectTime = null
        this.selectDateTime = null
        this.$refs.dialog2.show();
        this.orderId = res;
		this.$toast("预约成功！");
      })
    },
    async subscribe() {
      return new Promise(resolve => {
        uni.requestSubscribeMessage({
          tmplIds: ['zp7YaAoYivJkGtLD4nsmm9DSW4HGDwJX__hPsLiqAJ4'],
          complete() {
            resolve();
          },
        });
      })
    },
    handleConfirm() {

      if (!this.selectDateTime) {
        this.$toast("请选择预约时间！");
      } else if (this.selectTime.status !== 0) {
        this.$toast("当前时间不可约！");
      } else {
        this.req.getUserInfoCheckMobile().then(res => {
          console.log(res)
          this.form.realname = res.nickname;
          this.form.phone = res.mobile
          this.$refs.dialog.show()
        })
      }
    },
    toOrder() {
      this.subscribe().then(() => {
        uni.setStorageSync("needRefreshOrderNum", true)
        uni.switchTab({
          url: '/pages/index/my/index/index',
        })
      })

    },
  },
  computed: {
    selectDate() {
      return this.timeList[this.currentDateIndex]
    },
  },
}
</script>

<style scoped lang='scss'>
.root {
  background-color: white;
  min-height: calc(100vh - var(--window-top));

  & > .divider {
    background-color: #f4f4f4;
    height: r(20px);
  }

  & > .header {
    height: r(200px);
    display: flex;
    align-items: center;
    padding: r(0 30px);

    .left {
      height: r(100px);
      width: r(100px);
      margin-right: r(30px);
      border-radius: 50%;
    }

    .right {

      .name {
        font-size: r(32px);
        color: #333333;
      }

      .desc {
        font-size: r(24px);
        color: #909090;
      }

      .money {
        font-size: r(24px);
        color: #909090;

        .line {
          text-decoration: line-through;
        }

        .light {
          font-size: r(28px);
          font-weight: 500;
          color: #FA4F23;
        }
      }
    }

  }

  & > .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(env(safe-area-inset-bottom) + #{r(120px)});
    box-shadow: r(1px 2px 15px 1px) rgba(129, 129, 129, 0.27);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: white;

    .btn {
      width: r(200px);
      height: r(80px);
      line-height: r(80px);
      background: #BF8F3A;
      border-radius: r(50px);
      font-size: r(30px);
      color: white;
      text-align: center;
      margin-right: r(30px);
    }
  }

  & > .content {
    padding-bottom: calc(env(safe-area-inset-bottom) + #{r(150px)});

    .tabs {
      border-bottom: 1px solid #E2E2E2;

      .tab {
        width: r(170px);
        height: r(110px);
        line-height: unset;
        color: #666666;
        font-size: r(21px);

        &.active {
          background-color: $primary-color;
          color: white;
        }

        .tab-wrapper {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .time-wrapper {
      padding-top: r(35px);
      position: relative;

      .disable-dialog {
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        z-index: 999;
        border-radius: r(20px);
        padding: r(30px 60px);
        box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, .1);
        font-size: r(34px);
        font-weight: bold;
      }

      &.disabled {
        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          background-color: rgba(#000000, .05);
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
        }

        .disable-dialog {
          display: block;
        }
      }

      .time-block {
        padding: r(35px 24px);
        width: 100%;

        .title {
          font-size: r(26px);
          color: #666666;

          .cuIcon-time {
            margin-right: r(18px);
          }
        }

        .time-list {
          $gap: r(20px);
          width: calc(100% + #{$gap});
          overflow-x: hidden;
          display: flex;
          flex-wrap: wrap;

          .time {
            height: r(70px);
            text-align: center;
            border: 1px solid #D3D3D3;
            border-radius: r(70px);
            width: calc(25% - #{$gap});
            margin-right: $gap;
            margin-top: $gap;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            transition: background-color, color .2s ease-in-out;

            &.current {
              border-color: $primary-color;
              background-color: $primary-color;
              color: white;
            }

            &.disable {
              background: #F0F1F3;
              font-size: r(22px);
              color: #aaa;
            }
          }

        }
      }
    }

  }

  .dialog {

    .input {
      margin-top: r(30px);
      border-radius: r(20px);
      border: 1px solid $primary-color;
      height: r(80px);
    }
  }
}
</style>